<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="password_top">
      <view class="password">
        <input
          type="text"
          placeholder="输入姓名"
          v-model="id_card_name"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="password">
        <input
          type="text"
          placeholder="输入身份号码"
          v-model="id_card_no"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0rpx 0 -20rpx;
        "
      >
        <view class="password" style="flex: 2">
          <input
            type="text"
            placeholder="请输入图形验证码"
            v-model="graphical"
            style="font-size: 28rpx"
            placeholder-style="font-size: 28rpx;"
          />
        </view>
        <image
          :src="graphicalimg"
          mode=""
          style="
            width: 220rpx;
            height: 80rpx;
            margin: 10rpx 30rpx 30rpx;
          "
          @click="graphicalcode"
        ></image>
        <!-- <canvas style="width:220rpx;height:80rpx;" canvas-id="canvas" @click="updateImageCode"></canvas> -->
      </view>
    </view>

    <view class="button" @click="certification()"> 提交 </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      id_card_name: "",
      id_card_no: "",
      graphicalimg: "",
      graphical: "",
    };
  },
  onShow() {
    this.graphicalcode();
  },
  methods: {
    async graphicalcode() {
      let userinfo = uni.getStorageSync("userInfo");
      let res = await api.graphicalcode({
        query: {
          key: userinfo.account,
        },
        method: "get",
      });
      this.graphicalimg = res.data;
      console.log(res);
    },
    async certification() {
      if (this.id_card_name == "") {
        this.$refs.uToast.show({
          title: "请填写姓名",
        });
        return;
      }
      if (this.id_card_no == "") {
        this.$refs.uToast.show({
          title: "请填写身份证号",
        });
        return;
      }
      if (this.id_card_no.length != 18) {
        this.$refs.uToast.show({
          title: "身份证号有误",
        });
        console.log(this.id_card_no.length, "this.id_card_no.length");
        return;
      }
      if (this.graphical == "") {
        this.$refs.uToast.show({
          title: "请填写图形验证码",
        });
        return;
      }

      let res = await api.certification({
        query: {
          id_card_name: this.id_card_name,
          id_card_no: this.id_card_no,
          img_code: this.graphical,
        },
        loading: "加载中",
        method: "post",
      });
      if (res.code == 0) {
        let resa = await api.info({
          loading: "加载中",
        });
        uni.setStorageSync("userInfo", resa.data);
        this.$refs.uToast.show({
          title: "认证成功",
          type: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            success: function () {
              undefined;
              let page = getCurrentPages().pop(); //跳转页面成功之后
              if (!page) return;
              page.onLoad(); //如果页面存在，则重新刷新页面
            },
          });
        }, 1000);
      } else {
        this.graphicalcode();
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  // margin: 0 30rpx;
  background-color: $bg-color3;
  border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between;
		align-items: center; */

  color: #ffffff;
  margin: 20rpx 30rpx;
  padding: 6rpx 0;
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 30rpx;
  height: 90rpx;
  //   background-color: #f78623;
  color: $text-color4;
  background-image: $button;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: 100% 100%;

  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
</style>
